<template>
  <div>
    <!-- 添加和修改课时表单 -->
    <el-dialog :visible="dialogVisible" :title="title" @close="dialogVisible = false">
      <el-form :model="video" label-width="120px" >
        <el-form-item label="课时标题">
          <el-input v-model="video.title"/>
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number v-model="video.sort" :min="0" />
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.free">
            <el-radio v-model="video.free" :label="1">免费</el-radio>
            <el-radio v-model="video.free" :label="0">默认</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 上传视频 TODO -->
        <el-form-item label="上传视频">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :limit="1"
            :action="uploadUrl">
            <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
            <el-button
              :disabled="uploadBtnDisabled"
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload()">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button :disabled="flag" type="primary" @click="saveOrUpdateVideo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import videoApi from '@/api/video'
export default {
  data() {
    return {
      dialogVisible: false,
      video: {
        sort: 0,
        free: 0
      },
      flag: true,
      title: '',
      fileList: [], // 上传文件列表
      uploadBtnDisabled: false,
      uploadUrl: 'http://localhost:8130//admin/vod/media/upload'
    }
  },
  methods: {
    // 上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning('想要重新上传视频，请先删除列表中的视频')
    },
    // 上传
    submitUpload() {
      this.uploadBtnDisabled = true
      this.$refs.upload.submit() // 提交上传请求
    },
    // 视频上传成功的回调
    handleUploadSuccess(response, file, fileList) { // 响应报文http状态码为200时调用
      this.uploadBtnDisabled = false
      if (response.success) {
        this.$message.success('视频上传成功')
        this.video.videoSourceId = response.data.id
        this.video.videoOriginalName = file.name // file 代表本地上传的文件对象
      } else {
        this.$message.error('上传失败')
      }
      this.fileList = []
      this.flag = false
    },

    // 失败回调
    handleUploadError() { // 响应报文状态码不是200 例如404
      this.uploadBtnDisabled = false
      this.$message.error('上传失败2')
      this.fileList = []
    },
    saveOrUpdateVideo() {
      if (this.video.id) {
        this.update()
      } else {
        this.save()
      }
    },
    update() {
      videoApi.updateVideo(this.video).then(r => {
        this.$message.success('更新课时成功')
        this.dialogVisible = false
        this.$parent.listNestedChapters()
      })
      this.dialogVisible = false
    },
    save() {
      videoApi.saveVideo(this.video).then(r => {
        this.$message.success('新增课程成功')
        this.dialogVisible = false
        this.$parent.listNestedChapters()
      })
    },
    open(id) {
      this.title = '更新课时'
      //  回显要更新的video数据
      videoApi.getVideo(id).then(r => {
        this.video = r.data.item
        this.video.free = this.video.free ? 1 : 0
        this.dialogVisible = true
      })
    }
  }

}
</script>
